<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        
        li{
            list-style: none;
            line-height: 40px;
            border: 1px dashed #333;
        }
        .list{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <button class="addEle">添加元素</button>
        <button class="delEle">删除元素</button>
        <ul class="list one">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
        <ul class="list two">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
   
</body>
<script>
    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");  
    var addEle = document.querySelector(".addEle");
    var delEle = document.querySelector(".delEle");

    // 通过文档获取 对应id名 class名 tag名 name属性 css选择器的元素
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()
    // document.querySelector()
    // document.querySelectorAll()

    // var liList = document.getElementsByTagName("li");
    // console.log(liList);

    // 如何获取 .one li

    // 1. document.querySelectorAll()   
    // var liList = document.querySelectorAll(".one li");
    // console.log(liList);

    // 2. 通过父元素获取 (a. 先获取one 在通过标签名或class名获取one中的子元素)
    // a. 先获取父元素 在获取父元素中某个子元素
    // b. 父元素获取子元素时 只能通过 class名和标签名获取 (不能使用id和name方法获取 -> 没有此方法)

    var one = document.getElementsByClassName("one")[0]; // .one
    var liList = one.getElementsByTagName("li"); // .one li 
    console.log(liList);

    console.log(one.getElementsByClassName);  // 有方法
    console.log(one.getElementsByTagName); // 有方法
    console.log(one.getElementById);  // undefined
    console.log(one.getElementsByName); // undefined

   


</script>
</html>